<template>
  <div>
    <DaoHang></DaoHang>
    <div class="main_one">
      <div class="zb_gs">
        <span class="zb_sp">详细信息</span>
        <div class="butto"><el-button @click="insertTb" type="success" round>参与投标</el-button></div>
        <el-dialog title="投标信息" :visible.sync="dialogFormVisible" width="60%">
          <el-form :model="form">
            <el-form-item label="招标公司" :label-width="formLabelWidth">
              <div class="xians">{{ form.suoName }}</div>
            </el-form-item>
            <el-form-item label="项目名称" :label-width="formLabelWidth">
              <div class="xians">{{ form.projectName }}</div>
            </el-form-item>
            <el-form-item label="投标公司" :label-width="formLabelWidth">
              <div class="xians">{{ form.name }}</div>
            </el-form-item>
            <el-form-item label="公司法人" :label-width="formLabelWidth">
              <div class="xians">{{ form.peopleName }}</div>
            </el-form-item>
            <el-form-item label="注册资金" :label-width="formLabelWidth">
              <div class="xians">{{ form.money }} 万元</div>
            </el-form-item>
            <el-form-item label="成立时间" :label-width="formLabelWidth">
              <div class="xians">{{ form.year }} 年</div>
            </el-form-item>
            <el-form-item label="项目完成数" :label-width="formLabelWidth">
              <div class="xians">{{ form.projectNumber }} 个</div>
            </el-form-item>
            <el-form-item label="公司规模" :label-width="formLabelWidth">
              <div class="xians">{{ form.number }} 人</div>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
              <div class="inp"><el-input v-model="form.phone"></el-input></div>
            </el-form-item>
            <el-form-item label="投标报价" :label-width="formLabelWidth">
              <div class="inp_inp"><el-input v-model="form.price" class="input_bj"></el-input> 万元</div>
            </el-form-item>
            <el-form-item label="投标文件" :label-width="formLabelWidth">
              <el-upload class="upload-demo" ref="upload" action="http://47.120.18.31:8088/tb/setTouBFile" :file-list="fileList"
                :on-success="onSuccess" name="file" :limit="1" :auto-upload="false">
                <el-button slot="trigger" type="primary">选择投标文件</el-button>
                <el-button type="success" @click="$refs.upload.submit()">确认上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog_footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="touBInsert" style="margin-left: 200px;">投 标</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="title">招标信息</div>
      <ZbItem :item="zhaoB">
        <div class="nr">&emsp;&emsp;项目说明: &nbsp;</div>
        <div class="tex" v-html="zhaoB.ex"></div>
      </ZbItem>
      <div class="title">投标信息</div>
      <TbItem :item="touB" :isFinish="isFinish"></TbItem>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>

<script>
import DaoHang from '@/components/daoHang.vue'
import FooterPage from '@/components/foot.vue'
import ZbItem from '@/components/zbItem.vue'
import TbItem from '@/components/tbItem.vue'
import { getById, isFinish } from '@/api/zb'
import { getUserById } from '@/api/user'
import { touBInsert, deleteFile } from '@/api/tb'

// 招标信息详情
export default {
  name: 'detailIndex',
  data () {
    return {
      zhaoB: {},
      touB: [],
      isFinish: false,
      formLabelWidth: '120px',
      dialogFormVisible: false,
      fileList: [],
      form: {
        suoName: '',
        projectName: '',
        name: '',
        phone: '',
        peopleName: '',
        money: undefined,
        year: undefined,
        projectNumber: undefined,
        number: undefined,
        price: undefined,
        url: ''
      }
    }
  },
  async created () {
    if (this.user.token === undefined || this.user.token === null || this.user.token === '') {
      this.$confirm('检测到当前页面需要登入权限，是否登入获取权限 ', '登入提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '去登入',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$router.push('/login')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
          this.$router.go(-1)
        })
    } else {
      this.getData()
    }
  },
  methods: {
    async getData () {
      const id = this.getId
      this.isFinish = await isFinish(id)
      const { data } = await getById(id)
      if (data === undefined) {
        this.$router.go()
      }
      this.zhaoB = data[0].zhaoB
      if (this.isFinish === true) {
        if (data[1].touB === -1 || data[1].touB.length === 0) {
          return null
        } else {
          this.touB = data[1].touB
        }
      }
    },
    checkUser (user) {
      if (user.ban === 1) {
        this.$message({
          type: 'error',
          message: '您的账号已被冻结，请联系官方客服查询'
        })
        return false
      }
      if (user.money === null || user.number === null || user.peopleName === '' || user.projectNumber === null || user.year === null) {
        this.$confirm('参与投标需要先完善个人信息，是否去完善个人信息 ', '完善个人信息提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '前往个人中心',
          cancelButtonText: '取消'
        })
          .then(() => {
            this.$router.push('/user')
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
            return false
          })
      }
      return true
    },
    async check () {
      const { data } = await getUserById(this.user.id)
      if (this.checkUser(data) === false) {
        return false
      } else {
        this.form.name = data.name
        this.form.peopleName = data.peopleName
        this.form.money = data.money
        this.form.year = data.year
        this.form.projectNumber = data.projectNumber
        this.form.number = data.number
        return true
      }
    },
    async insertTb () {
      if (this.zhaoB !== null) {
        if (this.zhaoB.close === 1) {
          this.$message({
            type: 'error',
            message: '该项目存在风险已被禁止'
          })
          return
        }
        this.form.suoName = this.zhaoB.name
        this.form.projectName = this.zhaoB.projectName
      }
      if (await this.check() === false) {
        this.dialogFormVisible = false
        return
      }
      this.dialogFormVisible = true
    },
    async touBInsert () {
      // 投标注册
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        this.$message({
          type: 'error',
          message: '请输入正确的手机号'
        })
        this.dialogFormVisible = false
        return
      }
      if (this.form.price === undefined || this.form.price === '' || isNaN(this.form.price) || Number(this.form.price) < 0) {
        this.$message({
          type: 'error',
          message: '请正确的价格'
        })
        this.dialogFormVisible = false
        return
      }
      if (this.form.url === '') {
        this.$message({
          type: 'error',
          message: '请上传投标文件（标书）'
        })
        this.dialogFormVisible = false
        return
      }
      const res = await touBInsert(this.form)
      if (res.isSuccess) {
        this.$message({
          type: 'success',
          message: res.message
        })
      } else {
        await deleteFile(this.form.url)
        this.$message({
          type: 'error',
          message: res.message
        })
      }
      this.dialogFormVisible = false
    },
    async onSuccess (response) {
      this.form.url = response
      // if (response.isSuccess) {
      //   Notification({
      //     title: '头像更新成功',
      //     type: 'success'
      //   })
      // }
    }
  },
  computed: {
    getId () {
      return this.$route.params.id
    },
    user () {
      const token = this.$store.getters.token
      const id = this.$store.getters.userId
      return { token: token, id: id }
    }
  },
  components: {
    DaoHang,
    FooterPage,
    ZbItem,
    TbItem
  }
}
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  text-align: center;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: #855f5f;
  border-bottom: 1px solid;
  border-top: 1px solid;
}
.butto {
  text-align: right;
  padding-right: 10%;
}
.xians {
  padding-left: 2rem;
  text-align: left;
  width: 80%;
}
.inp {
  margin-left: 4%;
  width: 60%;
}
.inp_inp {
  margin-left: 3.4%;
  width: 65%;
  .input_bj {
    width: 92%;
  }
}
.upload-demo {
  margin-left: 4%;
  width: 50%;
  text-align: left;
}
.dialog_footer {
  width: 80%;
}

.none {
  float: left;
  margin-left: 100px;
  width: 1000px;
  line-height: 200px;
  height: 200px;
  text-align: center;
  font-size: 30px;
  color: #855f5f;
  background-color: #c8f2ff;
}
</style>
